<template>
  <PageLayout>
    <div class="bg-fff p-24">
      <a-form style="width: 500px">
        <a-descriptions title="结算方式选择"> </a-descriptions>
        <a-form-item
          :labelCol="{ style: { width: '180px' } }"
          label="设置每日收费时间"
        >
          <a-time-picker
            style="width: 100%"
            v-model:value="msg.daily_charg_time"
            format="HH:mm"
            valueFormat="HH:mm"
          >
            <template #suffix>
              <a-tooltip title="提示">
                <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
              </a-tooltip>
            </template>
          </a-time-picker>
          <!-- <a-input :maxlength="30" v-model:value="msg.xfs">
            <template #suffix>
              <a-tooltip title="提示">
                <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
              </a-tooltip> </template
          ></a-input> -->
        </a-form-item>
        <!-- <a-form-item
          :labelCol="{ style: { width: '180px' } }"
          label="设置每台设备默认信用分"
        >
          <a-input :maxlength="30" v-model:value="msg.default_device_amount">
            <template #suffix>
              <a-tooltip title="提示">
                <info-circle-outlined style="color: rgba(0, 0, 0, 0.45)" />
              </a-tooltip> </template
          ></a-input>
        </a-form-item> -->
        <div class="card-list">
          <!-- <a-card>
            <a-descriptions title="设置每瓶耗材规格"> </a-descriptions>
            <a-form-item label="洗发水">
              <a-input
                :maxlength="5"
                v-model:value="msg.shampoo_spec"
                suffix="ml"
              ></a-input>
            </a-form-item>
            <a-form-item label="护发素">
              <a-input
                :maxlength="5"
                v-model:value="msg.conditioner_spec"
                suffix="ml"
              ></a-input>
            </a-form-item>
            <a-form-item label="养发液">
              <a-input
                :maxlength="5"
                v-model:value="msg.hairtonic_spec"
                suffix="ml"
              ></a-input>
            </a-form-item>
          </a-card>
          <a-card>
            <a-descriptions title="代理商默认单台库存总量"> </a-descriptions>
            <div class="d-flex grid-gap10">
              <a-form-item label="洗发水">
                <a-input
                  :maxlength="5"
                  v-model:value="msg.shampoo_ratio0"
                  suffix="瓶"
                ></a-input>
              </a-form-item>
              <a-form-item label="警戒线">
                <a-input
                  :maxlength="3"
                  v-model:value="msg.shampoo_ratio1"
                  suffix="百分比"
                ></a-input>
              </a-form-item>
            </div>
            <div class="d-flex grid-gap10">
              <a-form-item label="护发素">
                <a-input
                  :maxlength="5"
                  v-model:value="msg.conditioner_spec_ratio0"
                  suffix="瓶"
                ></a-input>
              </a-form-item>
              <a-form-item label="警戒线">
                <a-input
                  :maxlength="3"
                  v-model:value="msg.conditioner_spec_ratio1"
                  suffix="百分比"
                ></a-input>
              </a-form-item>
            </div>
            <div class="d-flex grid-gap10">
              <a-form-item label="养发液">
                <a-input
                  :maxlength="5"
                  v-model:value="msg.hairtonic_spec_ratio0"
                  suffix="瓶"
                ></a-input>
              </a-form-item>
              <a-form-item label="警戒线">
                <a-input
                  :maxlength="3"
                  v-model:value="msg.hairtonic_spec_ratio1"
                  suffix="百分比"
                ></a-input>
              </a-form-item>
            </div>
          </a-card> -->
          <a-card>
            <a-descriptions title="生成设备编号"> </a-descriptions>
            <a-form-item label="生成数量">
              <div class="d-flex">
                <a-input :maxlength="5" placeholder="请点击生成" v-model:value="num"></a-input>
                <a-button type="primary"  class="ml-24" @click="getQrCode">生成设备编号</a-button>
              </div>
            </a-form-item>
          </a-card>
          <a-card>
            <a-descriptions title="新商户赠送积分"> </a-descriptions>
            <a-form-item label="赠送积分">
              <div class="d-flex">
                <a-input :maxlength="5" placeholder="请输入" v-model:value="msg.shop_balance"></a-input>
              </div>
            </a-form-item>
          </a-card>
        </div>

        <a-button
          type="primary"
          class="mt-40 float-right"
          style="width: 100px"
          @click="submit"
          >提交</a-button
        >
      </a-form>
    </div>
  </PageLayout>
</template>

<script setup>
import { postParamList, postParamUpdate, postQrDown } from "@/api/common";
import { message } from "ant-design-vue";
import { onMounted } from "vue";
const msg = ref({});
const list = ref([]);
onMounted(() => {
  postParamList().then((res) => {
    console.log(res.data);
    let obj = {};
    list.value = res.data;
    res.data.map((item, index) => {
      if (index >= res.data.length - 3) {
        const valArr = item.value.split("_");
        obj[`${item.keyName}0`] = valArr[0];
        obj[`${item.keyName}1`] = valArr[1];
      } else {
        obj[item.keyName] = item.value;
      }
    });
    console.log("obj", obj);
    msg.value = obj;
  });
});

const submit = () => {
  let arr = [];
  // let obj =
  list.value = list.value.map((item) => {
    if (item.keyName.indexOf("_ratio") > -1) {
      item.value =
        msg.value[`${item.keyName}0`] + "_" + msg.value[`${item.keyName}1`];

      return item;
    } else {
      return {
        ...item,
        value: msg.value[item.keyName],
      };
    }
  });
  postParamUpdate(list.value).then((res) => {
    message.success("更新成功");
  });
};
const num = ref("");
const getQrCode = () => {
  if (num.value > 0) {
    postQrDown({
      num: num.value,
    }).then((res) => {});
  }
};
</script>

<style lang="less" scoped>
.card-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
</style>
